<template>
  <div id="charge">
        <!-- /.u-menu -->
        <div class="u-main">
          <div id="tab_menu">
            <ul class="u-tab clearfix">
              <li :class="{current:(model==1)}"><a href="javascript:void(0)" @click="changeModel(1)">网银充值</a></li>
              <li :class="{current:(model==2)}"><a href="javascript:void(0)" @click="changeModel(2)">支付宝充值</a></li>
              <li :class="{current:(model==3)}"><a href="javascript:void(0)" @click="changechargeModel(3)">充值记录</a></li>
            </ul>
          </div>
          <div id="tab_box">
            <div class="u-form-wrap" v-show="model==1">
              <div>
                <div class="uf-tips">
                  <p>
                    1、所有投标保证金将由第三方平台托管。</p>
                  <p>
                    2、即时充值所产生的费用，由一起好平台承担。</p>
                  <p>
                    3、请注意您的银行卡充值限制，以免造成不便。</p>
                  <p>
                    4、如果充值金额没有及时到账，请和客服联系。</p>
                  <p class="red">
                    5、充值进来的资金，若不投资，24小时后才可提现，收取1%服务费；若三天内网站未发标，而需提现的，免收服务费。</p>
                </div>
                <div class="m-form-box mt10">
                  <div>
                    <div class="m-form-til">
                      <b>在线充值</b></div>
                    <ul id="recharge_banklist" class="bank-lists clearfix" style="display: block;">
                      <li>
                        <label for="icbc">
                          <input name="bank" value="icbc" type="radio" /><span class="ico-b ico-icbc"></span></label></li>
                      <li>
                        <label for="ccb">
                          <input name="bank" value="ccb" type="radio" /><span class="ico-b ico-ccb"></span></label></li>
                      <li>
                        <label for="cmb">
                          <input name="bank" value="cmb" type="radio" /><span class="ico-b ico-cmb"></span></label></li>
                      <li>
                        <label for="boc">
                          <input name="bank" value="boc" type="radio" /><span class="ico-b ico-boc"></span></label></li>
                      <li>
                        <label for="abc">
                          <input name="bank" value="abc" type="radio" /><span class="ico-b ico-abc"></span></label></li>
                      <li>
                        <label for="bocom">
                          <input name="bank" value="bocom" type="radio" /><span class="ico-b ico-bocom"></span></label></li>
                      <li>
                        <label for="spdb">
                          <input name="bank" value="spdb" type="radio" /><span class="ico-b ico-spdb"></span></label></li>
                      <li>
                        <label for="citic">
                          <input name="bank" value="citic" type="radio" /><span class="ico-b ico-citic"></span></label></li>
                      <li>
                        <label for="cmbc">
                          <input name="bank" value="cmbc" type="radio" /><span class="ico-b ico-cmbc"></span></label></li>
                      <li>
                        <label for="gdb">
                          <input name="bank" value="gdb" type="radio" /><span class="ico-b ico-gdb"></span></label></li>
                      <li>
                        <label for="hxbc">
                          <input name="bank" value="hxbc" type="radio" /><span class="ico-b ico-hxbc"></span></label></li>
                      <li>
                        <label for="cib">
                          <input name="bank" value="cib" type="radio" /><span class="ico-b ico-cib"></span></label></li>
                      <li>
                        <label for="ceb">
                          <input name="bank" value="ceb" type="radio" /><span class="ico-b ico-ceb"></span></label></li>
                      <li>
                        <label for="psbc">
                          <input name="bank" value="psbc" type="radio" /><span class="ico-b ico-psbc"></span></label></li>
                      <li>
                        <label for="sdb">
                          <input name="bank" value="sdb" type="radio" /><span class="ico-b ico-sdb"></span></label></li>
                      <li>
                        <label for="pab">
                          <input name="bank" value="pab" type="radio" /><span class="ico-b ico-pab"></span></label></li>
                      <li>
                        <label for="bob">
                          <input name="bank" value="bob" type="radio" /><span class="ico-b ico-bob"></span></label></li>
                      <li>
                        <label for="shb">
                          <input name="bank" value="shb" type="radio" /><span class="ico-b ico-shb"></span></label></li>
                      <li>
                        <label for="bjrc">
                          <input name="bank" value="bjrc" type="radio" /><span class="ico-b ico-bjrc"></span></label></li>
                      <li>
                        <label for="srcb">
                          <input name="bank" value="srcb" type="radio" /><span class="ico-b ico-srcb"></span></label></li>
                      <li>
                        <label for="hzcb">
                          <input name="bank" value="hzcb" type="radio" /><span class="ico-b ico-hzcb"></span></label></li>
                      <li>
                        <label for="njcb">
                          <input name="bank" value="njcb" type="radio" /><span class="ico-b ico-njcb"></span></label></li>
                      <li>
                        <label for="czsb">
                          <input name="bank" value="czsb" type="radio" /><span class="ico-b ico-czsb"></span></label></li>
                      <li>
                        <label for="bohb">
                          <input name="bank" value="bohb" type="radio" /><span class="ico-b ico-bohb"></span></label></li>
                      <li>
                        <label for="hkbea">
                          <input name="bank" value="hkbea" type="radio" /><span class="ico-b ico-hkbea"></span></label></li>
                    </ul>
                    <div class="i-item i-long-item">
                      <label class="i-til" style="text-align: right;">
                        <span class="red">*</span><b>充值金额：</b></label><div class="i-right">
                      <input id="recharge_money" name="money" type="text" class="i-inp" style="width: 90px;" /><p
                      class="tips">
                      <span class="ico-error" id="recharge_money_error"></span>
                    </p>
                      <div class="i-inp-tips">
                        <p>
                          单笔充值金额应大于1元且不能超过100万元</p>
                      </div>
                    </div>
                    </div>
                    <!-- /.i-item -->
                    <div class="i-item i-long-item">
                      <label class="i-til" style="text-align: right;">
                        充值手续费：</label><div class="i-right">
                      <div class="i-txt">
                        <i id="recharge_fee_show">0.00</i>元
                      </div>
                    </div>
                    </div>
                    <!-- /.i-item -->
                    <div class="i-item i-long-item">
                      <label class="i-til" style="text-align: right;">
                        实际到账金额：</label><div class="i-right">
                      <div class="i-txt">
                        <i id="recharge_money_show">0.00</i>元</div>
                    </div>
                    </div>
                    <!-- /.i-item -->
                    <div class="i-item i-long-item">
                      <label class="i-til" style="text-align: right;">
                        目前账户可用余额：</label><div class="i-right">
                      <div class="i-txt">
                        <i id="user_money_now">0.00</i>元</div>
                    </div>
                    </div>
                    <!-- /.i-item -->
                    <div class="i-item i-long-item hasborderbot">
                      <label class="i-til" style="text-align: right;">
                        充值后账户可用余额：</label><div class="i-right">
                      <div class="i-txt">
                        <i id="user_money_show">0.00</i>元</div>
                    </div>
                    </div>
                    <!-- /.i-item -->
                    <div id="recharge_online_msg" class="i-item" >
                    </div>
                    <div class="i-item-btn">
                      <button type="submit" id="recharge_online_submit" class="i-btn-recharge">
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="u-form-wrap" v-show="model==2">
              <div class="i-item i-long-item">
                <label class="i-til" style="text-align: right;">
                  <span class="red">*</span><b>充值金额：</b></label><div class="i-right">
                <input id="zhifubao" v-model="orderAmount" name="money" type="text" class="i-inp" style="width: 90px;" /><p
                class="tips">
                <span class="ico-error" id=""></span>
              </p>
                <div class="i-inp-tips">
                  <p>
                    单笔充值金额应大于1元且不能超过100万元</p>
                </div>
              </div>
              </div>
              <div>
                <!--支付宝充值-->
                <el-button type="primary" @click="zhifubaocharge" style="height: 40px;margin-left: 165px">支付宝充值,请点击</el-button>
              </div>
            </div >

            <div class="u-form-wrap" v-show="model==3">
              <div id="recharge_record_box" class="u-form-wrap">
                <div class="m-sub-til" style="padding: 0;">
                  充值记录</div>
                <div class="search-box" style="margin-bottom: 15px;">
                  <table class="u-table">
                    <tr>
                      <td colspan="3">
                        <div class="tab-search" style="padding-top: 5px;">
                          <template>
                            <el-select v-model="value" placeholder="请选择">
                              <el-option
                                v-for="item in status"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                <span style="float: left">{{ item.label }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                              </el-option>
                            </el-select>
                            <!--<div class="block">-->
                              <span class="demonstration">默认</span>
                              <el-date-picker
                                v-model="value1"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                              </el-date-picker>
                            <!--</div>-->
                          </template>
                          <div class="i-item-btn">
                            <button id="do_search" class="i-btn-txt3" @click="searchBycons(1)">查询</button>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <table class="u-table">
                  <tr>
                    <th width="12%">订单号</th>
                    <th width="10%">时间</th>
                    <th width="10%">金额</th>
                    <th width="15%">充值方式</th>
                    <th width="15%">交易号</th>
                    <th width="10%">状态</th>
                    <th width="8%">说明</th>
                    <th width="8%">操作</th>
                  </tr>
                  <tr v-for="(charge,i) in charges">
                    <td>{{i+1}}</td>
                    <td>{{$moment(charge.chargeTime).format('YYYY-MM-DD')}}</td>
                    <td>{{charge.chargeMoney}}</td>
                    <td>{{charge.chargeType}}</td>
                    <td>{{charge.chargeOrder}}</td>
                    <td>{{charge.chargeStatus}}</td>
                    <td>{{charge.chargeContext}}</td>
                    <td style="color: green;" @click="deletecharge(charge.chargeId)">删除</td>
                  </tr>
                </table>
                <div class="page-wrap"></div>
                <div style="margin-top: -50px;margin-bottom: -50px">
                  <p class="notic_pagelink" v-show="allFlag">
                    <span v-for="i in pageInfo.pages">
                      <a href="javascript:;" @click="findlist(i)" :class="{notic_acur:(activeNum==i)}">{{i}}</a>
                    </span>
                  </p>
                  <p class="notic_pagelink" v-show="ByConsFlag">
                    <span v-for="ii in pageInfo.pages">
                      <a href="javascript:;" @click="searchBycons(ii)" :class="{notic_acur:(activeNum==ii)}">{{ii}}</a>
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
  </div>
</template>

<script>
    export default {
        name: "charge",
      data(){
        return{
          model:1,
          orderAmount:0,
          orderSubject:"喂狗",
          orderDescription:"喂狗",
          charges:[],pageInfo:[],
          //下拉列表数据
          status: [{
            value: 'charged',
            label: '已充值'
          }, {
            value: 'charging',
            label: '充值中'
          },{
            value: 'all',
            label: '全部'
          }],
          value: '',

          value1: '',  //存放时间
          allFlag:true,
          ByConsFlag:false,
          activeNum:1
        }
      },
      methods:{
        changeModel(i){
          this.model=i
        },
        /*删除充值记录通过ID并查询返回PageInfo*/
        deletecharge:function(id){
          /*时间不为空*/
          if(this.value1!=''){
            this.axios.post("/api/user/deletechargeById",{chargestatus:this.value,chargetime:this.value1,chargeId:id}).then((data)=>{
              this.charges=data.data.list
              this.pageInfo=data.data
            })
            /*时间为空*/
          }else{
            this.axios.post("/api/user/deletechargeById",{chargestatus:this.value,chargeId:id}).then((data)=>{
              this.charges=data.data.list
              this.pageInfo=data.data
            })
          }
        },
        /*条件查询充值记录*/
        searchBycons:function(start){
          this.allFlag=false
          this.ByConsFlag=true
          this.activeNum=start
          if(this.value1!=''){
            this.axios.post("/api/user/findchargeBycons",{chargestatus:this.value,chargetime:this.value1,startPage:start}).then((data)=>{
              this.charges=data.data.list
              this.pageInfo=data.data
            })
          }else{
            this.axios.post("/api/user/findchargeBycons",{chargestatus:this.value,startPage:start}).then((data)=>{
              this.charges=data.data.list
              this.pageInfo=data.data
            })
          }
        },
        /*切换到充值记录标签并初始化表格数据*/
        changechargeModel:function(i){
          this.allFlag=true
          this.ByConsFlag=false
          this.model=i
          this.axios.post("/api/user/findcharge").then((data)=>{
            this.charges=data.data.list
            this.pageInfo=data.data
          })
        },
        /*根据页码查询充值记录*/
        findlist:function (index) {
          this.activeNum=index
          this.axios.post("/api/user/findSinglechargePage",{pageNum:index})
            .then((data)=>{
              this.charges=data.data.list
              this.pageInfo=data.data
            })
        },
        /*支付宝充值*/
        zhifubaocharge:function () {
          if(this.orderAmount>1&this.orderAmount<=1000000){
            this.axios.post("/api/charge/zhifubaocharge",{
              orderAmount:this.orderAmount,orderSubject:this.orderSubject,orderDescription:this.orderDescription
            }).then((data)=>{
              /*跳转至支付宝支付页面*/
              document.querySelector('body').innerHTML=data.data
              document.forms[0].submit()
            })
          }else {
            alert("充值金额不正确！")
          }
        }
      }
    }
</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';
  @import "../../assets/css/style.css";
  .pay-cur { border: 1px solid #dcdcdc; border-bottom: none; }
</style>
